<template>
	<article class="kp-modifyPass" v-bind:style="{ height: pageHeight+'px' }">
		<div class="kp-mp-box">
			<div class="kp-mb-li mt-30">
				<input type="text" :placeholder="auto" v-model="nickAuto" @focus="nucket" @input="nickNameNum" />
			</div>
			<p>{{min}}/{{max}}</p>
		</div>
	</article>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				nickAuto: '',
				min: '0',
				max: '30',
				pageHeight: '',
				auto:'输入个性签名',
				nick:true,
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			if(this.userinfo.signature) {
				this.auto = unescape(this.userinfo.signature.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
				console.log(this.auto.length)
				this.min = this.auto.length
			} else {
				this.auto = "输入个性签名";
			}
			this.$root.eventHub.$on('nicketAuto', () => { //eventHub接收事件
				this.save();
			});
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			nucket(){
				if(this.nick){
					if(this.userinfo.signature) {
						this.nickAuto = unescape(this.userinfo.signature.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
						this.auto = "输入个性签名";
					}
					this.nick = false;
				}
				
			},
			nickNameNum() {
				
				if(this.min < this.max) {
					this.min = this.nickAuto.length;
				} else {
					this.min = this.nickAuto.length - 1;
					this.nickAuto = this.nickAuto.substring(0, this.max)
				}
			},
			save() {
				if(this.nickAuto == "") {
					this.$toast('个性签名不能为空')
					return false;
				} else {
					//实名认证
					let param = {
						userID: this.userinfo.userID,
						signature: this.nickAuto,
						type: "1"
					};
					let that = this;
					this.$http.post(this.$baseUrl.baseurl + "kpcx/appPersonalCenter/updateInfo", param).then((res) => {
						console.log(res);
						if(res.data.Code == 0) {
							var userinfo = res.data.Result.appuser;
							if(res.data.Result.appuser) {
								that.$store.commit('USERINFO', userinfo);
								if(res.data.Result.appuser.IDNo) {
									userinfo.realnamestatus = true;
									that.$store.commit('USERINFO', userinfo);
								} else {
									userinfo.realnamestatus = false;
									that.$store.commit('USERINFO', userinfo);
								}
								that.$router.go(-1);
							} else {
								that.$toast('用户信息不存在');
							}
						} else {
							that.$toast(res.data.msg);
						}

					}).catch((err) => {

					})
				}
			}
		},
		components: {

		},
		computed: mapGetters([
			'userinfo',
		]),
		beforeDestroy() {
			this.$root.eventHub.$off('nicketAuto')
		},
	}
</script>

<style scoped>
	/* //头像部分 */
	
	.kp-modifyPass {
		background: #f4f5f9;
	}
	
	.kp-mp-box {
		padding-top: 86px;
	}
	
	.kp-mb-li {
		height: 98px;
		margin-top: 32px;
		display: flex;
		padding: 0 30px;
		background: #fff;
	}
	
	.kp-mb-li input {
		flex: 1;
		border: none;
		font-size: 32px;
		color: rgb(51, 51, 51);
		background: #FFF;
		outline: none;
		margin-right: 30px;
	}
	
	.kp-mb-li input::-ms-input-placeholder {
		color: rgb(203, 203, 203);
	}
	
	input::-webkit-input-placeholder {
		color: rgb(203, 203, 203);
	}
	
	input::-moz-placeholder {
		color: rgb(203, 203, 203);
	}
	
	.kp-mp-box p {
		text-align: right;
		padding: 17px 30px 0;
		font-size: 28px;
		color: rgb(138, 138, 138);
	}
</style>